<template>
<a-row>
    <a-row class="mytitle">
        <a-icon type="trademark" class="icon-class" /> <!--style="color: #0785FD"-->
      出厂前版权信息编辑
    </a-row>
    <a-row class="con">
        <div class="clearfix">
            <span>编辑： </span>
            <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
                <a-button> <a-icon type="upload" /> 选择包含版权信息的压缩文件 </a-button>
            </a-upload>
            <a-button
                type="primary"
                :disabled="fileList.length === 0"
                :loading="uploading"
                @click="handleUpload"
                style="margin-left: 1rem"
                >
                {{ uploading ? 'Uploading' : 'Start Upload' }}
            </a-button>
        </div>
    </a-row>
</a-row>
</template>

<script>
import request from '@/request/request'

export default {
    data() {
        return {
            fileList: [],
            uploading: false,
        };
    },
    methods: {
        handleRemove(file) {
            const index = this.fileList.indexOf(file);
            const newFileList = this.fileList.slice();
            newFileList.splice(index, 1);
            this.fileList = newFileList;
        },
        beforeUpload(file) {
            // 一个版本只能上传一个文件
            if (this.fileList.length === 1) {
                this.fileList = this.fileList.slice(-1);
            } else {
                this.fileList = [...this.fileList, file];
            }
            return false;
        },
        handleUpload() {
            const { fileList } = this;
            const formData = new FormData();
            fileList.forEach(file => {
                formData.append('files[]', file);
            });
            this.uploading = true;
            request('post', 'https://www.mocky.io/v2/5cc8019d300000980a055e76', formData).then(res => {
            // this.$axios.post('https://www.mocky.io/v2/5cc8019d300000980a055e76', formData).then(res => {
                this.fileList = [];
                this.uploading = false;
                this.$message.success('upload successfully.');
            }).catch(error => {
                this.uploading = false;
                this.$message.error('upload failed.');
            }) 
        },
    }
}
</script>
<style scoped>
    .mytitle {
        position: fixed;
        width: 100%;
        z-index: 100;
    }
    .con {
        margin:1rem;
        margin-top:4rem;
        padding: 1rem;
        background-color: #fff;
        height: 700px;
    }
    .clearfix {
        display: flex;
    }
    .icon-class {
        color: var(--themeColor);
    }
</style>